import { Checkbox, Tooltip } from 'antd'
import BeautyMenu from '@/desktop/components/BeautyMenu'
import  defaultAvatar  from '@/desktop/assets/avatar.jpg'
import { breakWord } from '@/desktop/styles'
import { useEmotionClassName } from '@/lib/emotion'
import type { AccountQywx } from '@/services/qywxs'
import { AccountQywxStatus } from '@/services/qywxs'
import { type Action } from './logics'

export function QywxItem(props: {
  item: AccountQywx
  rebooting: boolean
  actions: Action[]
  choosed: boolean
  switchChoose: (qywx: AccountQywx) => void
  canLogIn: null | string | boolean
}) {
  const getClassName = useEmotionClassName()
  const { item, rebooting, actions, choosed, switchChoose, canLogIn } = props

  const menuItems = useMemo(
    () =>
      actions.map(action => ({
        icon: action.icon,
        title: action.title,
        onClick: () => action.execute(),
      })),
    [actions],
  )

  return <div css={s.item}>
    <Checkbox checked={choosed} onChange={() => switchChoose(item)} />
    <img src={item.avatar || defaultAvatar} />
    <span className="username">{item.friendlyName}</span>
    <span className="wxid">{item.wxid}</span>
    <span className="hostname">{item.hostname}</span>
    {rebooting ? (
      <div className="status">重启中</div>
    ) : (
      <div className="status">
        {item.status === AccountQywxStatus.Offline ? '离线' : ''}
        {item.status === AccountQywxStatus.LoggedOut ? '已登出' : ''}
        {item.status === AccountQywxStatus.LoggingIn ? '登录中' : ''}
        {item.status === AccountQywxStatus.LoginFailed ? (
          canLogIn === true ? (
            <div>
              <span>登录失败，</span>
              <Tooltip
                placement="top"
                color="#fff"
                overlayClassName={getClassName(s.qrcode)}
                title={
                  <div>
                    <img src={item.qrcode ?? ''} />
                  </div>
                }
              >
                <a>扫码重登</a>
              </Tooltip>
            </div>
          ) : (
            <span>登录失败</span>
          )
        ) : (
          ''
        )}
        {item.status === AccountQywxStatus.CannotLogin ? '登录失败，请联系平台技术支持' : ''}
      </div>
    )}
    <span className="corpname">{item.corpname}</span>
    <div className="menu-wrap">{menuItems.length ? <BeautyMenu items={menuItems} /> : null}</div>
  </div>
}

const s = {
  item: css`
    ${breakWord};
    align-items: center;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    font-size: 13px;
    margin-left: 20px;
    padding: 10px 12px 10px 10px;
    &:hover {
      background-color: #fafafa;
    }
    .ant-checkbox-wrapper {
      margin-right: 1em;
    }
    img {
      border-radius: 2px;
      height: 40px;
      margin-right: 1.5em;
      width: 40px;
    }
    .username {
      color: #333;
      margin-right: 1.5em;
      width: 10em;
    }
    .wxid {
      margin-right: 0.5em;
      width: 11em;
      color: #333;
    }
    .hostname {
      margin-right: 0.5em;
      width: 8em;
      color: #333;
    }
    .status {
      flex: 1;
      margin-right: 2em;
      text-align: right;
      color: #333;
      white-space: nowrap;
      a {
        color: #1890ff;
      }
    }
    .corpname {
      color: #888;
      flex-shrink: 0;
      margin-right: 0.5em;
      text-align: right;
      width: 8em;
    }
    .menu-wrap {
      width: 30px;
    }
  `,
  qrcode: css`
    .ant-tooltip-inner {
      padding: 12px;
    }
    img {
      width: 160px;
      height: 160px;
    }
  `,
}
